<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="res/css/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="res/css/themes/icon.css">
	<script type="text/javascript" src="res/jquery.min.js"></script>
	<script type="text/javascript" src="res/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px"></div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
	<ul id="tree">
		</ul>
	</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;"></div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;"></div>
	<div data-options="region:'center',title:'Center'">
	<div id="tabs" class="easyui-tabs" style="width:700px;height:250px" >
		<div title="About" style="padding:10px" >
			<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>			
		</div>
		
		</div>
	
	</div>
</body>
<script type="text/javascript">
$(function(){
	$('#tree').tree({
		url:'http://localhost:8080/SSHLogin/api/tree',
		method:'get',
	 	onClick:function(node){
			var tab = $('#tabs').tabs('getTab',node.text); 
			if(tab==null){
				$('#tabs').tabs('add',{    
			    title:node.text,    
			    content:node.url,    
			    href:node.url+".jsp",
			    closable:true  
			    })
			    }else{
			    	$('#tabs').tabs('select',node.url+".jsp"); 
			    	
			    }
					      
		} 
	});
});
</script>
</html>